<template>
    <div>
        <div class="tab">

<el-table :data="tableData1" style="width: 99.5%" :header-cell-style="{ textAlign: 'center' }"
    :cell-style="{ textAlign: 'center' }">
    <el-table-column prop="recordTime" label="当前数据时间">
    </el-table-column>
    <el-table-column prop="activeElectricity" label="本日能耗">
    </el-table-column>
    <el-table-column prop="electricityRateType" label="当前收费类型">
    </el-table-column>
    <el-table-column prop="electricityRate" label="当前电价(元/KWH)">
    </el-table-column>
    <el-table-column prop="electricityRateTop" label="尖峰值电费">
    </el-table-column>
    <el-table-column prop="electricityRateHigh" label="峰值电费">
    </el-table-column>
    <el-table-column prop="electricityRateCommon" label="平直电费">
    </el-table-column>
    <el-table-column prop="electricityRateLow" label="谷值电费">
    </el-table-column>
    <el-table-column prop="electricityRateAll" label="电费总计">
    </el-table-column>
</el-table>
</div>
<div id="main3"></div>
        <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <div class="block">
                        <span class="demonstration">选择日期查询设备测量的数据</span>
                        <el-date-picker v-model="value1" type="date" placeholder="选择日期" value-format="yyyy/MM/dd"
                            @change="getList" :picker-options="expireTimeOPtion">
                        </el-date-picker>
                    </div>
                    <p style="font-size:20px;font-weight: 700; text-align: center;padding-top: 10px;">设备测量数据详情</p>
                    <p style="font-size:12px;font-weight: 700; text-align: center;padding-top: 10px;">以下数据时间为{{ value1
                    }}
                    </p>
                    <div class="table">

                        <div>
                            <el-table v-show="flag" :data="tableData" border style="width: 70%"
                                :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
                                :cell-style="{ textAlign: 'center' }">
                                <el-table-column prop="oTempMax" label="最高温度 (℃)">
                                </el-table-column>
                                <el-table-column prop="oTempMin" label="最低温度 (℃)">
                                </el-table-column>
                                <el-table-column prop="oTempAvg" label="平均温度 (℃)">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div>
                            <el-table v-show="flag" :data="tableData" border style="width: 70%"
                                :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
                                :cell-style="{ textAlign: 'center' }">
                                <el-table-column prop="oHumiMax" label="最大湿度 (%)">
                                </el-table-column>
                                <el-table-column prop="oHumiMin" label="最低湿度 (%)">
                                </el-table-column>
                                <el-table-column prop="oHumiAvg" label="平均湿度 (%)">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div>
                            <el-table v-show="flag" :data="tableData" border style="width: 70%"
                                :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
                                :cell-style="{ textAlign: 'center' }">
                                <el-table-column prop="oAmax" label="最大电流 (A)">
                                </el-table-column>
                                <el-table-column prop="oAmin" label="最小电流 (A)">
                                </el-table-column>
                                <el-table-column prop="oApAll" label="总能耗使用 (KWH)">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div>
                            <el-table v-show="flag" :data="tableData" border style="width: 70%"
                                :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
                                :cell-style="{ textAlign: 'center' }">
                                <el-table-column prop="oIllMax" label="最大光照强度 (LX)">
                                </el-table-column>
                                <el-table-column prop="oIllMin" label="最小光照强度 (LX)">
                                </el-table-column>
                                <el-table-column prop="oIllAvg" label="平均光照强度 (LX)">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <div class="sele">
                        <span class="demonstration">请选择需要查询的天数范围</span>
                        <el-select v-model="value" placeholder="请选择" @change="getCount">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div id="main" style="width:80%;height:600px;" v-if="ff"></div>
                </div>
            </el-col>
        </el-row>
       
    </div>
</template>

<script>
import { deviceStateAPI, stockStateAPI, dataStateAPI, rateStateAPI, rateLineAPI } from '@/api/system/dataanalysis'

import * as echarts from 'echarts';
import { getdailyConsumAPI, getconsumQueryAPI } from '@/api/system/baobiao.js'
export default {
    data() {
        return {
            options: [
                {
                    value: '2',
                    label: '2天内'
                },
                {
                    value: '3',
                    label: '3天内'
                }, {
                    value: '5',
                    label: '5天内'
                }, {
                    value: '7',
                    label: '7天内'
                }, {
                    value: '10',
                    label: '10天内'
                }, {
                    value: '15',
                    label: '15天内'
                }],
            value: '5',
            value1: this.getNow(),
            ff: false,
            flag: true,
            tableData: [],
            tableData1: [],

            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
        }
    },
    mounted() {
        this.getList()
        this.getCount()
        this.getNow()
        this.getrateLineAPI()
        this.getrateState()
    },
    methods: {
        // 电费曲线
        getrateLineAPI() {
            rateLineAPI().then(res => {
                console.log(res);
                var chartDom = document.getElementById('main3');
                let myChart = echarts.getInstanceByDom(
                    chartDom
                );
                if (myChart == null) {
                    myChart = echarts.init(chartDom);
                }

                // var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text:'电费变化曲线图'
                    },

                    grid: {
                        top: "30%",
                        // bottom: '20%',
                        // left: '15%',
                        right: '5%'

                    },
                    legend: {
                        name: '电费',
                        show: true,
                        y: '2%',
                        // type: "plain"

                    },
                    xAxis: {

                        type: 'category',
                        data: res.data[1],
                        axisLabel: {
                            interval: 0,
                            //    rotate:10  
                        },

                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#FFF"
                            }
                        },
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    series: [

                        {
                            label: {
                                // 柱图头部显示值
                                show: true,
                                position: "top",
                                // textStyle: { //数值样式
                                // color: '#fff',
                                fontSize: 15
                                // }
                            },
                            // lineStyle: {
                            //     color: '#66dffb'

                            // },
                            // itemStyle: {
                            //     color: '#66dffb'

                            // },
                            name: '电费',
                            data: res.data[0],
                            type: 'line',
                            showBackground: true,
                            backgroundStyle: {
                                color: '#66dffb'
                            }
                        }
                    ]
                };
                //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // option && myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                    // myChartSex2.resize();
                });
            })
        },
        getrateState() {
            rateStateAPI().then(res => {
                console.log(res);
                this.tableData1 = res.data
            })
        },

        getList() {
            getdailyConsumAPI(this.value1).then(res => {
                console.log(res);
                this.tableData = res.data;
                this.flag = true
            })
        },
        getCount() {
            getconsumQueryAPI(this.value).then(res => {
                // const setEchartWH = { //设置控制图表大小变量
                //     width: 600,
                //     height: 600
                // };
                // console.log(res);
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '能耗使用情况',
                        left: 'center'

                        // textAlign:'center'
                    },
                    grid: {
                        top: "20%"
                    },
                    legend: {
                        name: '能耗(KWH)',
                        show: true,
                        y: '8%'
                        // type: "plain"
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data[1],
                        axisLabel: {
                            interval: 0,
                            //    rotate:10  
                        },
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    series: [
                        {
                            label: {
                                // 柱图头部显示值
                                show: true,
                                position: "top",
                                textStyle: { //数值样式
                                    // color: '#fff',
                                    fontSize: 24
                                }
                            },
                            name: '能耗(KWH)',
                            data: res.data[0],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };
                //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.onresize = myChart.resize;
                option && myChart.setOption(option);


            })
            this.ff = true
        },
        getNow() {
            var date = new Date();
            var data1 = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + (date.getDate() - 1);
            return data1

        },
    }
}
</script>

<style lang="scss" scoped>
.table {

    margin-top: 55px;
    // border: 1px pink solid;
    height: 600px;

    div {
        // margin: 50px 100px;
        margin-left: 80px;
        margin-top: 25px;
        // border: 1px red solid;
    }


}

.demonstration {
    padding-left: 70px;
    padding-right: 30px;
    // margin-top: 35px;
}

.sele {
    margin-top: 55px;
    padding-left: 70px;
    padding-right: 30px;
}

.block {
    // border: 1px red solid;
    padding: 10px 100px;
    margin-top: 50px;

}

#main {
    margin-top: 50px;
    padding-left: 90px;
}

#main3 {
    width: 100%;
    height: 400px;
}
</style>